<template>
  <div class="section">
    <div class="label">{{ baseType === 3 ? '答案' : '选项' }}</div>
    <div class="title">单/多选题、填空题的选项范围从 2 到 20 </div>
    <div class="group">
      <ul>
        <li
          v-for="(node, idx) in options"
          :key="node"
          :data-index="baseType === 3 ? node.no : numberToLetter(node.no)"
        >
          <div class="check radio" v-if="baseType === 1"><el-checkbox v-model="node.checked" :label="true" @change="radioChange(node.no)"></el-checkbox></div>
          <div class="check" v-if="baseType === 2"><el-checkbox v-model="node.checked"></el-checkbox></div>
          <div class="ls-cus-editor"><cus-editor v-model="node.content" /></div>
          <div class="tip" v-if="valid && !node.content">请输入选项内容！</div>
          <i class="el-icon-close" @click="deleteOption(idx)" />
        </li>
        <li v-show="options.length < 20" @click="addOption">
          <el-button icon="el-icon-circle-plus-outline" size="medium" round type="primary">添加一个选项</el-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import $ from '$';

export default {
  props: ['baseType', 'valid'],
  setup(props) {
    let analysis = ref(null);
    let options = ref(Array.from(new Array(4), (i, idx) => ({
      no: idx + 1,
      content: null,
      checked: false,
    })));

    const numberToLetter = (n: number) => String.fromCharCode(n + 64);


    const addOption = () => options.value.push({
      no: options.value.length + 1,
      content: null,
      checked: false,
    });

    const deleteOption = (idx) => {
      options.value.splice(idx, 1);
      options.value.map((n, idx) => (n.no = idx + 1));
    };

    const radioChange = (no) => options.value.map((n) => n.no !== no && (n.checked = false));

    const validator = () => {
      if (options.value.some((i) => !i.content)) { return false; }
      let hasChecked = props.baseType === 1 && options.value.every((i) => !i.checked) || props.baseType === 2 && !options.value.some((i) => i.checked);
      if (hasChecked) { ElMessage.warning("请选择答案"); return false; }

      if (props.baseType < 3) {
        return {
          option: $.clone(options.value).map((i: any) => {
            i.name = numberToLetter(i.no);
            return i;
          }),
          rightAnswer: options.value.filter((i) => i.checked)
        }
      } else {
        return { rightAnswer: $.clone(options.value) }
      }
    }
    return { analysis, options, numberToLetter, addOption, deleteOption, radioChange, validator };
  }
}
</script>
<style lang="scss" scoped>
.section {
  .el-radio-group > :nth-of-type(1) {
    :deep(.el-radio__inner) {
      background: #72b22a;
      &:hover {
        border-color: #fff;
      }
      &::after {
        width: 6px;
        height: 3px;
        border: 2px solid #fff;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 3px;
        left: 2px;
        transform: rotate(-45deg);
        border-radius: 0px;
        background: none;
      }
      .is-checked {
        background: rgb(26, 175, 167);
        :deep(.el-radio__input.is-checked + .el-radio__label) {
          color: #fff;
        }
        :deep(.el-radio__inner::after) {
          content: "";
          width: 6px;
          height: 3px;
          border: 2px solid rgb(26, 175, 167);
          border-top: transparent;
          border-right: transparent;
          text-align: center;
          display: block;
          position: absolute;
          top: 3px;
          left: 2px;
          transform: rotate(-45deg);
          border-radius: 0px;
          background: none;
        }
      }
    }
  }
  .el-radio-group > :nth-of-type(2) {
    :deep(.el-radio__inner) {
      background: #fc514f;
      &:hover {
        border-color: #fff;
      }
      &::after {
        content: "+";
        width: 6px;
        height: 6px;
        text-align: center;
        display: block;
        position: absolute;
        top: 1px;
        left: 0px;
        transform: rotate(-45deg);
        border-radius: 0px;
        background: none;
        color: #fff;
      }
    }
  }
  .el-radio-group > :nth-of-type(1).is-checked {
    background: rgb(26, 175, 167);
    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: #fff;
    }
    :deep(.el-radio__inner::after) {
      content: "";
      width: 6px;
      height: 3px;
      border: 2px solid rgb(26, 175, 167);
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 3px;
      left: 2px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
  .el-radio-group > :nth-of-type(2).is-checked {
    background: rgb(26, 175, 167);
    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: #fff;
    }
    :deep(.el-radio__inner::after) {
      content: "+";
      width: 6px;
      height: 6px;
      text-align: center;
      display: block;
      position: absolute;
      top: 1px;
      left: 0px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
      color: rgb(26, 175, 167);
    }
  }
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: rgb(104, 99, 99);
  }
  .group {
    li {
      position: relative;
      display: flex;
      align-items: center;
      &:not(:last-child) {
        margin-bottom: 15px;
      }
      &::before {
        content: attr(data-index);
        display: block;
        width: 18px;
        color: #77808d;
        line-height: 40px;
        // transform: translateX(-100%);
      }
      button {
        width: 100%;
      }
      i.el-icon-close {
        display: block;
        width: 18px;
        height: 18px;
        color: #fff;
        line-height: 18px;
        text-align: center;
        background: #a9b3bf;
        border-radius: 2px;
        margin-right: -26px;
        cursor: pointer;
        &:active {
          transform: scale(0.95);
        }
      }
      .ls-cus-editor {
        flex: 1;
        margin: 0 15px;
      }
      .tip {
        left: 0;
        margin-bottom: -15px;
      }
      .check {
        width: 20px;
        line-height: 40px;
        margin-left: -42px;
        overflow: hidden;
        margin-right: 20px;
      }
      :deep(.radio) .el-checkbox__inner {
        border-radius: 50%;
      }
    }
  }
}
</style>
